import { useQuery } from '@tanstack/react-query'
import { Cascader } from 'antd'

import MenuAPI from '@/apis/system/menu'

interface MenuPermissionSelectProps {
  value?: any[]
  onChange?: (value: any) => void
}

export default function MenuPermissionSelect({ value = [], onChange }: MenuPermissionSelectProps) {
  const { data } = useQuery({
    queryKey: ['menuPermission'],
    queryFn: MenuAPI.getMenuPermission
  })

  const options: any[] | undefined = data

  const { SHOW_CHILD } = Cascader

  return (
    <Cascader
      value={value}
      style={{ width: '100%' }}
      options={options}
      onChange={onChange}
      multiple
      showCheckedStrategy={SHOW_CHILD}
      fieldNames={{ label: 'title', value: 'id' }}
    />
  )
}
